<template>
    <!-- 两条横杠,别搞错了 -->
    <transition-group enter-active-class="animate__animated animate__bounceInRight animate__fast">

        <!-- <transition name="panel" enter-active-class="animate__animated animate__bounceInRight animate__fast"> -->
        <div class="panelone" v-if="is" key="1">
            <div class="lang">
                <span style="font-size: 2rem;font-weight: 500;">{{ time }}</span>
                <span style="font-size:1.2rem">，管理员；一杯酒一包烟，博客管理管一天 </span>
                <div class="weather m-t-0-4 m-l-0-3" style="font-szie:0.8rem;font-weight: 400;opacity: 0.9;"
                    v-if="infoOfPanelOne">
                    <span style="position:relative">{{ infoOfPanelOne?.weather.city }},{{
                        infoOfPanelOne?.weather.week
                        }};</span>
                    <span style="position:relative">今日{{ infoOfPanelOne?.weather.type }},</span>
                    <span style="position:relative">最{{ infoOfPanelOne?.weather.low }},最{{
                        infoOfPanelOne?.weather.hight
                        }},</span>
                    <span style="position:relative">{{ infoOfPanelOne?.weather.notice }}</span>
                </div>
                <div class="webinfo d-flex m-t-5 ai-center" style="font-size:large" v-show="infoOfPanelOne">
                    <div class="flow d-flex ai-center">
                        <el-icon color="rgb(165, 163, 255)">
                            <Sort />
                        </el-icon>
                        <span class="m-l-0-4" style="position:relative">今日流量({{ infoOfPanelOne?.flow.at(-1)?.num
                            }})</span>
                    </div>
                    <div class="usernum  d-flex ai-center m-l-4">
                        <el-icon color="rgb(165, 163, 255)">
                            <UserFilled />
                        </el-icon>
                        <span class="m-l-0-4" style="position:relative">用户数量({{ infoOfPanelOne?.usernum }})</span>
                    </div>
                    <div class="host d-flex ai-center m-l-4">
                        <el-icon color="rgb(165, 163, 255)">
                            <InfoFilled />
                        </el-icon>
                        <span class="m-l-0-4" style="position:relative">管理员({{ store.adminname }})</span>
                    </div>
                </div>
                <div class="m-t-3">
                    <div style="position:relative">&nbsp前台页面: <a :href="webhost">{{ webhost }}</a></div>
                    <div style="position:relative">&nbsp后端接口: <a :href="serverhost">{{ serverhost }}</a></div>
                </div>
            </div>
        </div>



        <!-- </transition>
        <transition name="panel" enter-active-class="animate__animated animate__bounceInRight animate__fast"> -->
        <div class="paneltwo" v-if="is" key="3">

            <div class="toper">
                <div class="toperr" style="cursor: default">
                    快速入口
                </div>
            </div>

            <div class="bottomer d-flex ai-center jc-around">
                <div class="ic" v-if="isSuperAdmin" @click="routeToPath('/article')">
                    <div class="box"
                        style="background-color: rgb(232, 216, 249);border-radius: .3rem;margin-bottom: .5rem;">
                        <el-icon size="2.5rem" color="rgb(179, 127, 235)">
                            <Document />
                        </el-icon>
                    </div>
                    <div>博客管理</div>
                </div>

                <div class="ic" v-if="isSuperAdmin" @click="routeToPath('/category')">
                    <div class="box"
                        style="background-color: rgb(210, 236, 255);border-radius: .3rem;margin-bottom: .5rem;">
                        <el-icon size="2.5rem" color="rgb(105, 192, 255)">
                            <Menu />
                        </el-icon>
                    </div>
                    <div>分类管理</div>
                </div>

                <div class="ic" v-if="isSuperAdmin">
                    <div class="box"
                        style="background-color: rgb(255, 243, 209);border-radius: .3rem;margin-bottom: .5rem;">
                        <el-icon size="2.5rem" color="rgb(255, 218, 115)">
                            <UserFilled />
                        </el-icon>
                    </div>
                    <div>用户管理</div>
                </div>

                <div class="ic" @click="routeToPath('/articleadd')">
                    <div class="box"
                        style="background-color: rgb(255, 218, 236);border-radius: .3rem;margin-bottom: .5rem;">
                        <el-icon size="2.5rem" color="rgb(255, 133, 192)">
                            <Reading />
                        </el-icon>
                    </div>
                    <div>博客生成</div>
                </div>

                <div class="ic" @click="routeToPath('/server')">
                    <div class="box"
                        style="background-color: rgb(255, 225, 211);border-radius: .3rem;margin-bottom: .5rem;">
                        <el-icon size="2.5rem" color="rgb(255, 199, 173)">
                            <Cloudy />
                        </el-icon>
                    </div>
                    <div>服务器状态</div>
                </div>
            </div>
        </div>
        <!-- </transition> -->

        <!-- <transition name="chart" enter-active-class="animate__animated  animate__bounceInUp animate__fast"> -->
        <div class="chartI" v-if="is" key="2">

            <div class="toper">
                <div class="toperr" style="cursor: default">
                    数据统计
                </div>
            </div>
            <div class="d-flex" style="position:relative">
                <div>
                    <div style="position:absolute ; top:1.4rem;left:1.5rem">流量分析</div>
                    <div class="linechart" ref="LChart"></div>
                </div>



                <div class="newblog" style="height:100%;padding-top: 1.6rem;margin-left: 1rem;flex-grow: 1;">
                    <div class="p-b-1">最新文章</div>
                    <div v-for="item in infoOfPanelOne?.newblog" :key="item.ID"
                        class="p-y-0-3 d-flex jc-between ai-center">
                        <router-link :to="`/editarticle/${item.ID}`">[{{ item.categoryname }}] &nbsp
                            &nbsp{{ item.article}}</router-link>
                        <div>({{item.CreatedAt.split('T').at(0)}})</div>
                    </div>
                    <div>
                    </div>
                </div>

            </div>

        </div>

        <!-- </transition> -->

    </transition-group>
</template>

<!------------------------------>

<script setup lang="ts">
import 'animate.css'
import { Area } from '@antv/g2plot';
import { useCounterStore } from '../../stores/counter'
let global = getCurrentInstance()
let store = useCounterStore()
let router = useRouter()

let is = ref(false)
onMounted(() => {
    is.value = true
})

//Flag:页面
let webhost = ref(import.meta.env.VITE_WEB_HOST)
let serverhost = ref(import.meta.env.VITE_SERVER_HOST)

//Flag:time
let time = computed(() => {
    let sign
    switch (new Date().getHours()) {
        case 6:
        case 6:
        case 7:
        case 8:
        case 9:
        case 10:
        case 11:
            sign = "早上好"
            break;
        case 12:
        case 13:
            sign = "中午好"
            break;
        case 14:
        case 15:
        case 16:
        case 17:
            sign = "下午好"
            break;
        default:
            sign = "晚上好"
    }
    return sign
})
//Flag:weatherInfo
type infoOfPanel = {
    weather: {
        data: string
        hight: string
        low: string
        fl: string
        city: string
        citykey: string
        week: string
        type: string
        notice: string
    }
    flow: [{
        date: string
        num: number  //虽然但是js会完成自动转换
    }]
    usernum: number,
    newblog:any,
}
let infoOfPanelOne = ref<infoOfPanel>()
global?.proxy?.$axios.get('/v1/info').then((res) => {
    if (res?.data.status == 200) {
        infoOfPanelOne!.value = {
            weather: JSON.parse(res.data.data.weather),
            usernum: res.data.data.usernum,
            flow: res.data.data.flow.map((item: any) => {
                item.num = Number(item.num)
                return item
            }),
            newblog: res.data.data.newblog
        }
        renderLine()
    }
})
//Flag:折线图
let LChart = ref()
const renderLine = () => {
    if (LChart.value) {
        const chart = new Area(LChart.value, {
            data: infoOfPanelOne.value!.flow.reverse(),
            xField: 'date',
            yField: 'num',
            autoFit: true,
            renderer: 'canvas',
            padding: [32, 32, 32, 32],
            xAxis: {
                range: [0, 1],
                tickCount: 7
            },
            areaStyle: () => {
                return {
                    fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
                };
            },
        })
        chart.render()
    }
}

//Flag:权限显示 
let isSuperAdmin = ref<boolean>(false)
if (store.role == 2) {
    isSuperAdmin.value = true
}
//Flag:权限跳转
const routeToPath = (path: string) => {
    router.push(path)
}

</script>

<!------------------------------>

<style scoped lang="scss">
.linechart {
    position: relative;
    // bottom: 2.5rem;
    top:3rem;
    height: 20rem;
    width: 55rem;
}



.bottomer {
    height: 100%;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.75rem
        /* 60px -> 3.75rem */
    ;
    height: 3.75rem
        /* 60px -> 3.75rem */
    ;
}

.ic {
    border-radius: .4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 8rem;
    width: 8rem;

    cursor: pointer;
}

.ic:hover {
    box-shadow: 0px 0px 3.5px grey;
}


.panelone {
    height: 20rem;
    background-image: url('../../assets/svg/dash_back1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;
    border-radius: 1rem;
    background-position: 2rem 0;
    position: relative;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.18);
}

.paneltwo {
    padding: 2rem;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.18);
    height: 18rem;
    margin-top: 2rem;
    background-color: white;
    border-radius: 1rem;
    position: relative;
}

.toper {
    height: 2.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.17);

    .toperr {
        font-size: 1.4rem;
        font-weight: 500;
        letter-spacing: .2rem;
    }
}

.adminname {
    height: 20rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;
    border-radius: 1rem;
    background-position: 2rem 0;
    position: relative;
}

.lang {
    cursor: default;
    position: absolute;
    left: 27rem;
    top: 3rem;
    letter-spacing: .4rem;
}

// 要定义开始结束状态才有动画效果
.panel-enter-from {
    left: 100vw;
}

.panel-enter-to {
    left: 0vw;
}

.chartI {
    padding: 2rem;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.18);
    height: 30rem;
    margin-top: 2rem;
    background-color: white;
    border-radius: 1rem;
    position: relative;
}

.chart-enter-from {
    bottom: -50vh;
}

.chart-enter-to {
    left: 0vh;
}
</style>